<template>
  <div class="dashboard p-6">
    <el-row :gutter="20" class="mb-6">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-title">用户总数</div>
          <div class="stat-value">{{ overview.userCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-title">帖子总数</div>
          <div class="stat-value">{{ overview.postCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-title">板块总数</div>
          <div class="stat-value">{{ overview.boardCount }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mb-6">
      <el-col :span="12">
        <el-card>
          <template #header>发帖趋势</template>
          <line-chart  />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>板块发帖分布</template>
          <bar-chart/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import LineChart from '../components/LineChart.vue'
import BarChart from '../components/BarChart.vue'
import { getOverview } from '../api/statistics'

const overview = ref({ userCount: 0, postCount: 0, boardCount: 0 })

onMounted(async () => {
  const resOverview = await getOverview()
  overview.value = resOverview
})
</script>

<style scoped>
.dashboard {
  background-color: #f5f7fa;
  min-height: 100vh;
}
.stat-card {
  text-align: center;
}
.stat-title {
  font-size: 16px;
  color: #999;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-top: 10px;
  color: #409EFF;
}
</style>
